<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet"
	href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="/resources/js/jquery-1.11.0.min.js"></script>
<script src="/resources/js/jquery-ui.min.js"
	type="text/javascript"></script>
<script src="/resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" media="screen"
	href="/resources/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="/resources/css/plugins/ui.multiselect.css" />
<link href="/resources/css/style.css" rel="stylesheet">

<script type="text/javascript">
	$(document).ready(function() {
		$("#mytabs").tabs();

		//------------------------------------------------------------------------------------------------------------------------

		$("#list3").jqGrid({
			url : 'json/jobchange.json',
			datatype : "json",
			colNames : [ 'SNo.', 'EmployeeName', 'Role in application' ],
			colModel : [ {
				name : 'SNo',
				index : 'SNo',
				width : 55
			}, {
				name : 'EmployeeName',
				index : 'name asc, invdate',
				width : 240
			},

			{
				name : 'RoleInAppln',
				index : 'RoleInAppln',
				width : 170,
				sortable : false,
				formatter : editLink
			} ],
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			pager : '#pager3',
			sortname : 'id',
			viewrecords : true,
			sortorder : "desc",

			caption : "Select Job Role"
		});

		jQuery("#list3").jqGrid('navGrid', '#pager3', {
			edit : false,
			add : false,
			del : false
		});

	});

	function editLink(cellValue, options, rowdata, action) {
		var edit = "<select id='roledropdown' style='width: 116px;'><option value='0'>Select</option><option value='1'>Manager</option> 						<option value='2'>Domain Owner</option><option value='3'>Admin</option><option value='4'>Employee</option>	</select>"

		//"<input  type='button' value='Validate' onclick=\"jQuery('#list3').editRow('" + options.rowId + "');\"  />";
		return edit;
	}
	
	function ChangeText(oFileInput, sTargetID) {

	    document.getElementById(sTargetID).value = oFileInput.value;
	}
	

</script>
<style type="text/css">
td { padding: 0px; }
td { vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }
</style>
</head>

<body>

	<div id="eric_header" class="wpthemeBannerInner">
		<table style="width: 100%">
			<tr>
				<td style="width: 30%"><a href='#'><img src="img/logo.png"
						class="media-object" alt=""></img></a></td>
				<td style="width: 40%">
					<div align="center">

						<p>
							Welcome <label for="ABCDE">ABCDE</label>
					</div>
				</td>
				<td style="width: 30%">
					<div align="right">
						<a href="<c:url value="j_spring_security_logout" /> ">Logout</a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="3"><img src="img/color_line.jpg" width="100%"
					style="PADDING-TOP: 0px"></img></td>
			</tr>
		</table>
	</div>


	<div id="mytabs">
		<ul>
			<li><a href="#tabs-3">Upload Dump File</a></li>
			<li><a href="#tabs-4">Change Role</a></li>
		</ul>
		<div id="tabs-3">
			<br> <br> <br> 
			<div id="lotusLoginContent" class="roundborder">
				<form class="lotusForm2 lotusLoginForm" name="LoginForm" action=""
					enctype="multipart/form-data" method="POST">

					<table >
						<tr >

							<td style="width: 200px" ><span style="vertical-align:top;font-size: 14px;"
								onclick="javascript:document.getElementById('file').click();"><input
									type="button" value="Browse"></span></td>

							<td><input id="txt" type="text" value="Choose File" style="font-size: 14px; width:246px">
								<input id="file" type="file" style='visibility: hidden; font-size: 14px;'
								name="img" onchange="ChangeText(this, 'txt');" /></td>

						</tr>
						<tr>
							<td><label for="file" style="font-size: 14px">Choose DB file:</label></td>
							<td>
								
									<select id="datafile" style="width: 247px; font-size: 14px">
										<option value="0">Select</option>
										<option value="1">HRMS DB Dump</option>
										<option value="2">ERIPRO Dump</option>
										<option value="3">CADO Dump</option>
									</select>
							
							</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
						<td>&nbsp;</td>
							<td>
								<div class="ssoButton" align="center">
									<input type="submit" name="Submit" value="Submit"
										id="Submit.button.Submit" class="eSsoLoginField">
							</div>
							</td>
							
						</tr>
					</table>



				</form>

			</div>
		</div>
		<br> <br> <br> 
		<div align="center" id="tabs-4">

			<table id="list3">

				<tr>
					<td></td>
				</tr>
			</table>
			<div id="pager3"></div>


			<br>
			<table>
				<tr>
					<td>
						<div class="ssoButton">
							<input type="submit" name="Submit" value="Submit"
								id="Submit.button.Submit" class="eSsoLoginField">
						</div>
					</td>
					<td>
						<div class="ssoButton">
							<input type="submit" name="Reset" value="Reset"
								id="Reset.button.Reset" class="eSsoLoginField">
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>

	
	<div id="ICH-FOOTER"></div>
</body>
</html>
